<template>
    <el-row class="height100 box box-tb box-pack-start">
        <div class="select box box-align-center box-pack-start mb10">
            <span class="mr10">学期</span>
            <el-select v-model="xqValue" placeholder="选择学期" @change="trClassListLabel" class="text">
                <el-option v-for="(item,index) in xqList" :key="index" :label="item.xn +`-`+item.xq"
                    :value="item.xn +`-`+item.xq"></el-option>
            </el-select>
        </div>
        <el-col class="box" style="height: calc(100% - 50px);">
            <el-col class="class box box-tb">
                <div class="box box-tb box-pack-start box-align-start class-top">
                    <h3>教学班级</h3>
                    <span>{{bjList.length}}个</span>
                </div>
                <div class="class-list" v-if="bjList.length !=0">
                    <div class="lists" :class="{active:index == current}" v-for="(item,index) in bjList" :key="index" :title="item.bjmc" @click="changeClass(item.id,index)">
                        {{item.bjmc}}
                    </div>
                </div>
                <div class="class-list height100 box box-pack-center box-align-center" v-else>
                     <el-empty description="暂无数据" image="../../../static/image/nodata/nodata.png" :image-size="50"></el-empty>
                </div>
            </el-col>
            <el-col class="height100 bgf ml20 padd20" style="overflow-y: auto;">
                <el-col class="" v-if="sjList.length !=0">
                    <el-col class="mt20 user-list">
                        <el-col class="box box-tb">
                            <el-col v-for="(item,i) in sjList" :key="i" class="el-box box box-tb">
                                <div class="list box box-pack-between box-align-center">
                                    <div class="box box-align-center">
                                        <el-image :src="item.img" class="img"></el-image>
                                        <div class="box box-align-start box-tb ml20">
                                            <h3>{{item.title}}</h3>
                                            <span>{{item.ldtype}}</span>
                                        </div>
                                    </div>
                                    <div v-if="item.rate == `101`">
                                        未发布
                                    </div>
                                    <div class="box box-pack-start box-align-center right" v-else>
                                        <div class="express mr20">
                                            <span class="mb10 tips">学生完成度</span>
                                            <el-progress :percentage="item.rate" style="width: 200px;"></el-progress>
                                        </div>
                                        <div class="percent">
                                            <span>{{item.finished}}</span>
                                            <span>/</span>
                                            <span>{{stuCnt}}</span>
                                        </div>
                                        <div class="detail cp" @click="detail(item.id)">详情</div>
                                    </div>
                                </div>
                            </el-col>
                        </el-col>
                    </el-col>
                </el-col>
                <el-col class="height100 box box-pack-center box-align-center" v-else>
                    <el-empty description="暂无数据" image="../../../static/image/nodata/nodata.png"></el-empty>
                </el-col>
            </el-col>
        </el-col>

        <detail-view :ldsjid="ldsjid" :classid="bj" :dialogVisible="tkzt" @clickClose="clickClose()" ref="child"></detail-view>
    </el-row>
</template>

<script>
    import detailView from './components/detail.vue';
    export default {
        components:{detailView},
        data() {
            return {
                loginInfo:this.$store.state.loginInfo,
                bjList:[],
                bj:0,
                ldsjid:0,
                sjList: [],
                tkzt: false,
                current: 0,
                xqList:[],
                xqValue:'',
                stuCnt:0
            };
        },
        mounted() {
            this.getXqData()
        },
        methods: {
            trClassListLabel(){
                let url = 'yteachplan/trcs';
                let params = {
                    xn:this.xqValue.split('-')[0],
                    xq:this.xqValue.split('-')[1].split('（')[0],
                    trid: this.loginInfo.user.id,
                    // trid: 24358,
                    schoolid: this.loginInfo.user.schoolId
                };
                this.$ajax.post(url,params).then(res => {
                    console.log(res);
                    if (res.code == 0) {
                        this.bjList = res.list;
                        if(res.list.length !=0){
                            this.bj = res.list[0].id;
                            this.stuLdsjRate();
                        }
                    } else {
                        this.$message.error(res);
                    }
                })
            },
            getXqData(){
                let url = "/dteacher/xnxqlist";
              let params = {
                  schoolid: this.loginInfo.user.schoolId
              };
              this.$ajax.post(url,params).then(res=>{
                  // console.log(res);
                  if(res.code == 0){
                      this.xqList = res.list;
                      let a = res.list.map(resp=>{if(resp.isCur == 1) return resp})
                      a.forEach(r=>{
                          if(r !=undefined) {
                              this.xqValue = r.xn +'-'+ r.xq
                          }
                      })

                      // this.xqValue = a[0].xn +'-'+a[0].xq
                      this.trClassListLabel();
                  }
              })
            },
            stuLdsjRate(){
                let url = '/yclassldsjtask/sjprocess';
                let params = {
                    xn:this.xqValue.split('-')[0],
                    xq:this.xqValue.split('-')[1].split('（')[0],
                    schoolid: this.loginInfo.user.schoolId,
                    classid:this.bj
                };
               this.$ajax.post(url,params).then(res=>{
                    console.log(res);
                    if(res.code == 0){
                        this.sjList = res.list;
                        this.stuCnt = res.classStuCnt
                    }else{
                        // this.$message.error('请求失败！');
                    }
                })
            },
            changeClass(classid,index) {
                this.current = index;
                this.bj = classid;
                console.log(classid);
                this.stuLdsjRate();
            },
            clickClose() {
                this.tkzt = false
            },
            detail(ldsjid) {
                this.ldsjid = ldsjid;
                this.$refs.child.ldsjStuWcInfo(ldsjid);
                this.tkzt = true
            }
        }
    }
</script>

<style scoped lang="scss">

    .class {
        width: 200px;
        background-color: #fff;
    }
    .class-top {
        padding: 10px 20px;
        border-bottom: 1px solid #EEF4F8;
    }
    .class-list{
        overflow-y: auto;
    }
    .lists {
        height: 58px;
        line-height: 58px;
        cursor: pointer;
        transition: ease-in-out .1s;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;

        &:hover{
            color: #fff;
            background: #7686F5;
        }
    }
    .lists.active{
        color: #fff;
        background: #7686F5;
    }
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .maxwidth {
        max-width: 1400px;
        margin: 20px auto !important;
    }



    .list {
        .img {
            width: 110px;
            height: 71px;
        }
        .top {
            box-sizing: border-box;
            width: 100%;
            border-bottom: 1px solid #ccc;

            .class-logo {
                width: 72px;
                height: 72px;
                background: #E2E6FE;
                border-radius: 5px;
                color: #626BF1;
            }

            .class-info {
                height: 100%;
            }
        }

        .bottom {
            width: 100%;

            .avatar {
                margin-left: -17px;

                &:first-child {
                    margin-left: 0;
                }
            }
        }
    }

    .tab {
        width: 158px;
        height: 42px;
        line-height: 42px;
        border-radius: 14px;
        border: 1px solid #E5E6F1;
        background-color: #fff;
        font-size: 18px;

        &:first-child {
            border-radius: 14px 0px 0px 14px;
        }

        &:last-child {
            border-radius: 0px 14px 14px 0px;
            border-left: none;
        }

        &.active {
            background: #626BF1;
            color: #fff;
        }
    }

    .grid-content {
        margin-top: 20px;
        background: #FFFFFF;
        border: 1px solid #fff;
        border-radius: 12px;
        transition: .3s ease-in-out;

        .user-name {
            font-size: 16px;
            font-weight: 600;
        }

        .right {
            height: 96px;

            .title {
                width: 134px;
                height: 20px;
                background: #F3F4FB;
                border-radius: 9px;
                color: #939FF4;
                font-size: 14px;
            }

            .delete {
                width: 46px;
                height: 24px;
                background: #FFFFFF;
                border: 1px solid #FF5A77;
                border-radius: 12px;
                color: #FF5A77;
            }
        }

        &:hover {
            border: 1px solid #BEBDE6;
            box-shadow: 2px 6px 13px 0px rgba(225, 227, 245, 0.69);
        }
    }

    .bg-white {
        background-color: #fff;
    }

    .item {
        margin-top: 50px;
        width: 334px;
        height: 20px;
        background: #F9E0DE;
        border-radius: 10px;

        span {
            color: #E36572;

            i {
                margin-right: 10px;
                display: inline-block;
                width: 48px;
                height: 20px;
                line-height: 20px;
                background: #EE8892;
                border-radius: 3px;
                text-align: center;
                color: #fff;
                font-style: normal;
            }

        }
    }
    // 进度条
    .start-time>>>.el-slider__runway {
        width: 100%;
        margin: 0;

        .el-slider__bar {
            // background-color: #fded00;
            background: linear-gradient(-7deg, #626BF1, #989BFA);
        }

        .el-slider__button-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .el-slider__button {
            display: inline-block;
            border: none;
            height: 15px;
            width: 15px;
            background: linear-gradient(-7deg, #626BF1, #989BFA);
        }
    }

    .start-time>>>.el-slider__runway.disabled .el-slider__button-wrapper:hover,
    .start-time>>>.el-slider__runway.disabled .el-slider__button:hover {
        cursor: default;
    }

        .img {
            width: 218px;
            height: 120px;
            border-radius: 7px;
        }

        .bold {
            font-size: 18px;
        }

        .name {
            padding-left: 20px;
            width: 300px;

            .edit {
                width: 76px;
                height: 26px;
                background: #FEF8F2;
                border: 1px solid #FF9B4F;
                border-radius: 13px;
                color: #FF9B4F;
                line-height: 26px;
                cursor: pointer;
            }
        }

    .list {
        margin: 10px 0;
        padding: 0 20px;
        box-sizing: border-box;
        width: 100%;
        height: 80px;
        background: #F8F9FC;
        border: 1px solid #fff;
        border-radius: 7px;

        .right {
            height: 100%;

            // width: 200px;
            .express {
                width: 230px;
                text-align: left;

                .tips {
                    display: block;
                }
            }
            .percent{
                width: 100px;
            }
        }
    }
    .detail {
        width: 50px;
        height: 100%;
        line-height: 80px;
    }

    .bgf {
        background-color: #fff;
    }

    .cbs {
        width: 140px;
        height: 24px;
        line-height: 24px;
        background: #F3F4FB;
        border-radius: 12px;
        color: #939FF4;
    }

.percent-num {
    font-size: 25px;
    color: #7686F6;
}

    ::-webkit-scrollbar {
        width: 5px;
    }

    ::-webkit-scrollbar-track {
        background: #f2f2f2;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #f2f2f2
    }

    /deep/ .el-empty__image img {
        width: 100%;
    }
</style>
